<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增收款码管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-qrcode-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">二维码地址：</label>
                <div class="col-sm-8">
                    <input name="qrUrl" class="form-control" type="text">
                    <span class="help-block m-b-none">
                        <i class="fa fa-info-circle"></i> 可通过扫一扫等工具识别（如已开通百度云图片识别功能，仅上传收款码图片即可，无需手填）
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">收款码金额（元）：</label>
                <div class="col-sm-8">
                    <input name="qrPrice" class="form-control" type="number" >
                    <span class="help-block m-b-none">
                        <i class="fa fa-info-circle"></i> 单位：元
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">微信/支付宝：</label>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input type="radio" name="qrType" id="qrTypeWx" value="WX" checked> 微信
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="qrType" id="qrTypeZFB"  value="ZFB"> 支付宝
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">上传收款码：</label>
                <div class="col-sm-8">
                    <input type="hidden" name="coverPhoto">
                    <div class="file-loading">
                        <input id="coverPhoto" name="file" type="file" accept="image/jpg,image/png,image/jpeg">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "pay/qrcode"
        $("#form-qrcode-add").validate({
            focusCleanup: true
        });

       /* function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-qrcode-add').serialize());
            }
        }*/

        $("input[name='deleteTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $(document).ready(function () {
            // 单图上传
            $("#coverPhoto").fileinput({
                uploadUrl: "#",
                //最大上传数量
                maxFileCount: 1,
                autoReplace: true,
                //allowedFileTypes: ['jpg', 'gif', 'png'],
                //控制主控件是否显示上传按钮开关
                showUpload: false,
                fileActionSettings: {
                    //是否显示预览界面的上传按钮
                    showUpload: false
                },
            });
        });

        function submitHandler() {
            if ($.validate.form()) {
                console.log($('#form-qrcode-add').serialize());
                let formData = getFormJson('form-qrcode-add');
                formData.append("file",$("#coverPhoto")[0].files[0]);
                console.log(formData);
                $.operate.saveFormData(prefix + "/add", formData);
            }
        }

        // 如：{Name:'摘取天上星',position:'IT技术'}
        // ps:注意将同名的放在一个数组里
        function getFormJson(formId) {

            let json = {};
            let form1 = $('#'+formId).serializeArray();
            $.each(form1, function () {
                if (json[this.name] !== undefined) {
                    if (!json[this.name].push) {
                        json[this.name] = [json[this.name]];
                    }
                    json[this.name].push(this.value || '');
                } else {
                    json[this.name] = this.value || '';
                }
            });
            let  formData = new FormData();
            Object.keys(json).forEach((key) => {
                formData.set(key,json[key]);
            });
            return formData;
        }
    </script>
</body>
</html>
